<template>
	<view class="mall">
		<!-- 全局导航栏 -->
		<toptab-Bar></toptab-Bar>

		<!-- 次级导航栏 -->
		<tab-bar :tabBarItems="tabBarItems">
			<template #icon>
				<image src="@/static/menu.png" mode="aspectFill" class="mall__tab-icon"></image>	
			</template>
			
		</tab-bar>
		
		<!-- 轮播图 -->
		<banner-swiper
		class="mall__banner-swiper"
		:swiper-items="bannerSwiperItems"
		></banner-swiper>
		
		
		<view class="mall__option flex">
			<view class="mall__option-item"
			v-for="item in optionItems"
			:key="item.id"
			>
				<image :src="item.iconUrl" mode="aspectFill" class="mall__option-icon"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		
		<!-- 推荐事物的渲染 -->
		<view class="mall__recommend-items">
			<mall-ver-item
			v-for="item in recommendItems"
			:key="item.id"
			:item="item"
			class="mall__recommend-item"
			></mall-ver-item>
		</view>
	</view>
</template>

<script setup>
	import toptabBar from '@/pages/index/toptabbar/tabbar.vue';
	import tabBar from '@/components/tabBar/tabBar.vue';
	import bannerSwiper from '@/components/bannerSwiper/bannerSwiper.vue'
	import mallVerItem from './components/mallVerItem/mallVerItem.vue'
	import {onMounted, ref} from 'vue';
	import decMallApi from "/api/dec/decIndex/decMallApi";

	const tabBarItems = ref([
		{label:'推荐',id:'mallTab01'},
		{label:'运动',id:'mallTab02'},
		{label:'食品生鲜',id:'mallTab03'},
		{label:'服装配饰',id:'mallTab04'},
		{label:'鞋帽',id:'mallTab05'},
		{label:'推荐',id:'mallTab06'},
	])
	
	const optionItems = ref([
		{name:'品牌',iconUrl:'/static/mall/branch.png',id:'mallOption01'},
		{name:'收藏',iconUrl:'/static/mall/bookmark.png',id:'mallOption02'},
		{name:'订阅',iconUrl:'/static/mall/subscribe.png',id:'mallOption03'},
		{name:'足迹',iconUrl:'/static/mall/footprint.png',id:'mallOption04'},
	])
	
	const bannerSwiperItems = ref();
	const recommendItems = ref();
	
	const baseImgUrl = 'https://upload.gfinter.net/';
	
	async function init(){
		await Mall_home_list();
	}
	
	// 推荐商品
	async function Mall_home_list(){
		let params ={
			page:1,
			per_page:10
		}
		try{
			let res = await decMallApi.Mall_home_list_API(params);
			// res.forEach((item)=>{
			// 	item.logo = baseImgUrl+item.logo;
			// })
			recommendItems.value = res.datas||null;
			bannerSwiperItems.value = res.adver||null;
			if(recommendItems.value!==null){
				recommendItems.value.forEach((item)=>{
					item.logo = baseImgUrl+item.logo;
				})
			}

			console.log('Mall_home_list 商城页面获取商品推荐成功',res);
			console.log(bannerSwiperItems.value);
		}catch(err){
			console.log('Mall_home_list 商城页面获取商品推荐失败',err);
		}
	}
	
	onMounted(()=>{
		init();
	})
</script>

<style lang="scss" scoped>
.mall{
	&__tab-icon{
		width: 40rpx;
		height: 40rpx;
		margin-right: 28rpx;
	}
	
	&__banner-swiper{
		display: block;
		margin-bottom: 20rpx;
	}
	
	&__option{
		width: 100%;
		box-sizing: border-box;
		padding: 0 24rpx;
		justify-content: space-between;
		margin-bottom: 20rpx;
		&-item{
			width: 68rpx;
			font-size: 26rpx;
			color: #535353;
			text-align: center;
		}
		
		&-icon{
			width: 68rpx;
			height: 68rpx;
			margin-bottom: 8rpx;
		}
	}
	
	&__recommend{
		&-items{
			width: 100%;
			// margin: 0 auto;
			box-sizing: border-box;
			padding: 0 24rpx;
			display: grid;
			grid-template-rows: auto;
			grid-template-columns: repeat(2,326rpx);
			row-gap: 20rpx;
			justify-content: space-between;
		}
		
	}
}
</style>